{extend name="common/base" /}

{block name="title"}<title>{$title}</title>{/block}

{block name="main"}
<div class="layui-fluid table">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form" lwid100="" iwid300="" lay-filter="form">

                        <div class="layui-form-item" id="front_mobile_div" >
                            <label class="layui-form-label">原手机号</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" id="front_mobile"  placeholder="请输入" type="text" lay-verify="required"  name="front_mobile"  value="{$mobile}" >
                            </div>
                            <div class="layui-form-mid layui-word-aux" >
                                <span id="front_mobile_tip"></span>
                            </div>
                        </div>

                        <div class="layui-form-item" id="after_mobile_div" >
                            <label class="layui-form-label">换绑后手机号</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" id="after_mobile"  placeholder="请输入" type="text" lay-verify="required"  name="after_mobile"  value="" >
                            </div>
                            <div class="layui-form-mid layui-word-aux" >
                                <span id="after_mobile_tip"></span>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-disabled" lay-submit="" lay-filter="form" >换绑</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}


<script>
    {block name="layui_table"}

    function disableButton(button, disable) {
        if (disable) {
            $(button).addClass("layui-btn-disabled");
        } else {
            $(button).removeClass("layui-btn-disabled");
        }
    }
    function checkDisableButton(button){
        return $(button).hasClass("layui-btn-disabled")
    }

    var index = parent.layer.getFrameIndex(window.name);
    var scene1 =0;
    var scene2 =0;
    $('#close').on("click",function () {
        // 可以对父窗口进行刷新
        window.parent.location.reload();
        parent.layer.close(index);
    });
    const inputFrontMobileElement = document.getElementById('front_mobile');
    const inputAfterMobileElement = document.getElementById('after_mobile');
    // 监听失去焦点事件
    inputFrontMobileElement.addEventListener('blur', function() {
        let load;
        // 处理失去焦点时的逻辑
        const inputValue = inputFrontMobileElement.value;
        var len=inputValue.length;
        if (len<11){
            document.getElementById('front_mobile_tip').innerText='';
            disableButton($('button[lay-submit]'),true)
            return false;
        }
        // 示例逻辑：检查输入是否为空
        if (len >11 ) {
            document.getElementById('front_mobile_tip').innerText='【输入手机号格式错误】';
            disableButton($('button[lay-submit]'),true)
            return false;
        }

        if (inputAfterMobileElement.value===inputValue){
            layer.msg('原手机号和换绑手机号不能相同');
            document.getElementById('front_mobile_tip').innerText='';
            inputFrontMobileElement.value=''
            document.getElementById('after_mobile_tip').innerText='';
            inputAfterMobileElement.value=''
            scene1=0;
            scene2=0;
            disableButton($('button[lay-submit]'),true)
            return false;
        }

        $.ajax({
            url: '/backmanage/anchorChangeMobile/checkMobileStatusTip'
            ,data: {'type':1,'front_mobile':inputValue}
            ,type: 'POST'
            ,async: false
            ,headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },beforeSend:function () {
                //加载动画
                load = layer.load(0, {shade: false});
            },success(res){
                layer.close(load);
                if(typeof  res == "string"){
                    res = JSON.parse(res);
                }
                if (res.code==2){
                    layer.msg('该手机号未注册');
                    scene1=-1;
                    document.getElementById('front_mobile_tip').innerText=''
                    disableButton($('button[lay-submit]'),true)
                    return false;
                }
                if (res.code==1){
                    scene1=1;
                }
                document.getElementById('front_mobile_tip').innerText='['+res.msg+']'
                console.log(111111,scene1,scene2)
                if (scene1==1 && (scene2==1 || scene2==2)){
                    disableButton($('button[lay-submit]'),false)
                }
            },error:function(data){
                layer.close(load);
                disableButton($('button[lay-submit]'),true)
                layer.msg('操作失败');
            }

        });
    });


    // 监听失去焦点事件
    inputAfterMobileElement.addEventListener('blur', function() {
        let load;
        // 处理失去焦点时的逻辑
        const inputValue = inputAfterMobileElement.value;
        var inputMobileValue=inputFrontMobileElement.value
        if (!inputMobileValue){
            layer.msg('原手机号不能为空');
            document.getElementById('after_mobile_tip').innerText='';
            inputAfterMobileElement.value=''
            disableButton($('button[lay-submit]'),true)
            return false;
        }
        if (inputMobileValue.length!==11){
            layer.msg('原手机号格式错误');
            document.getElementById('after_mobile_tip').innerText='';
            inputAfterMobileElement.value=''
            disableButton($('button[lay-submit]'),true)
            return false;
        }

        if (inputMobileValue===inputValue){
            layer.msg('原手机号和换绑手机号不能相同');
            document.getElementById('after_mobile_tip').innerText='';
            inputAfterMobileElement.value=''
            document.getElementById('front_mobile_tip').innerText='';
            inputFrontMobileElement.value=''
            scene1=0;
            scene2=0;
            disableButton($('button[lay-submit]'),true)
            return false;
        }

        if (scene1==-1){
            layer.msg('原手机号未注册不能进行换绑操作');
            document.getElementById('after_mobile_tip').innerText='';
            inputAfterMobileElement.value=''
            disableButton($('button[lay-submit]'),true)
            return false;
        }
        var len=inputValue.length;
        if (len<11){
            document.getElementById('after_mobile_tip').innerText='';
            disableButton($('button[lay-submit]'),true)
            return false;
        }
        // 示例逻辑：检查输入是否为空
        if (len >11 ) {
            document.getElementById('after_mobile_tip').innerText='【输入手机号格式错误】';
            disableButton($('button[lay-submit]'),true)
            return false;
        }

        $.ajax({
            url: '/backmanage/anchorChangeMobile/checkMobileStatusTip'
            ,data: {'type':2,'after_mobile':inputValue}
            ,type: 'POST'
            ,async: false
            ,headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },beforeSend:function () {
                //加载动画
                load = layer.load(0, {shade: false});
            }
            ,success(res){
                layer.close(load);
                if(typeof  res == "string"){
                    res = JSON.parse(res);
                }
                document.getElementById('after_mobile_tip').innerText='['+res.msg+']'
                scene2=res.code;
                console.log(22222,scene1,scene2)
                if (scene1==1 && (scene2==1 || scene2==2)){
                    disableButton($('button[lay-submit]'),false)
                }
            },error:function(data){
                layer.close(load);
                disableButton($('button[lay-submit]'),true)
                layer.msg('操作失败');
            }
        });
    });

    form.on('submit(form)', function(data){
        var dis =checkDisableButton($('button[lay-submit]'))
        if (dis){
            return false;
        }
        let load;
        var front_mobile=data.field.front_mobile;
        if (!front_mobile){
            layer.msg('原手机号不能为空！');
            return false;
        }
        if (front_mobile.length!==11){
            layer.msg('原手机号格式错误！');
            return false;
        }
        var after_mobile=data.field.after_mobile;
        if (!after_mobile){
            layer.msg('换绑后手机号不能为空！');
            return false;
        }
        if (after_mobile.length!==11){
            layer.msg('换绑后手机号格式错误！');
            return false;
        }
        var msg='';
        if (scene1==-1 || scene1==0){
            layer.msg('原手机号未注册不能进行换绑操作');
            return false;
        }
        if (scene2==-1 || scene2==0){
            layer.msg('换绑后手机号为空不能进行换绑操作');
            return false;
        }
        if(scene1==1 && scene2==1){
            msg='两者账号都已注册，换绑后两者账号的手机号会进行互换，确认进行操作嘛？';
        }else if(scene1==1 && scene2==2){
            msg='"'+front_mobile+'"换绑为"'+after_mobile+'"确认操作吗';
        }else{
            console.log(1111,scene1,scene2,'"'+front_mobile+'"换绑为"'+after_mobile)
            layer.msg('错误！');
            return false;
        }
        layer.confirm(msg, {
            title: '换绑确认', // 修改弹框标题
            btn: ['确定', '取消'] // 按钮
        }, function(index) {
            // 确定按钮的回调
            $.ajax({
                url: '/backmanage/anchorChangeMobile/create'
                ,data: data.field
                ,type: 'POST'
                ,async: false
                ,headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },beforeSend:function () {
                    //加载动画
                    load = layer.load(0, {shade: false});
                }
                ,success(res){
                    layer.close(load);
                    if(typeof  res == "string"){
                        res = JSON.parse(res);
                    }
                    if (res.code == 0){
                        layer.msg('操作成功');
                        // 可以对父窗口进行刷新
                        window.parent.location.reload();
                        //关闭当前frame
                        parent.layer.close(index);
                    }else{
                        layer.msg(res.msg);
                    }
                },error:function(data){
                    layer.close(load);
                    layer.msg('操作失败');
                }
            });
            layer.close(index);
        }, function(index) {
            // 取消按钮的回调
            layer.close(index); // 关闭弹框
        });
    });
    {/block}
</script>

